<template>
  <van-swipe-cell :disabled="disableSwiper">
    <van-cell center :to="'/show/' + item.id">
      <h3 slot="title" class="list-title">{{ item.title }}</h3>
      <div slot="label" class="list-desc">
        <!-- <p>{{ item.description }}</p> -->
        <p class="desc">
          <span><van-icon name="eye" />收藏({{ item.lovenum||0 }})</span>
          <span><van-icon name="good-job" />点赞({{ item.click||0 }})</span>
        </p>
      </div>
      <img class="list-img" :src="$getUrl(item.pic)" alt="" />
    </van-cell>
    <template #right>
      <!-- <van-button square type="danger" text="取消" /> -->
      <slot></slot>
    </template>
  </van-swipe-cell>
</template>

<script>
export default {
  name: 'ArticleList',
  props: {
    // 是否禁止滑动
    disableSwiper: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {

    };
  },
  methods: {
    async onLoad () {
    },
  },
}
</script>
<style scoped lang="less">
.article-list {
  margin-top: 10px;
  .list-title {
    font-size: 32px;
    color: #222;
    font-weight: normal;
  }
  .list-desc {
    font-size: 28px;
    .desc {
      color: #aaa;
      font-size: 24px;
      span {
        margin-right: 20px;
      }
    }
  }
  /deep/ .van-swipe-cell__value {
    width: 260px;
    flex: unset;
  }
  .list-img {
    width: 240px;
  }
  /deep/ .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }
}
</style>